<template>
  <div>
    <div class="app-container">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="0">
          <template slot="title">
            <div>
              结算单信息
            </div>
          </template>
          <el-card class="box-card" v-for="item in 1" :key="item.id">
            <table style="border: 1px solid #ccc" cellspacing="0" cellpadding="10" width="100%">
              <tr style="border: 1px solid #CCCCCC;">
                <td>结算单号</td>
                <td>合同标题</td>
                <td>合同编号</td>
                <td>合同类型</td>
                <td>委托单位</td>
                <td>建设位置</td>
                <td>结算单总金额</td>
                <td>开票金额</td>
                <td>回款金额</td>
              </tr>
              <tr>
                <td>{{sheet.statement_num}}</td>
                <td>{{sheet.contract_title}}</td>
                <td>{{sheet.contract_num}}</td>
                <td>{{contract.type_str}}</td>
                <td>{{contract.entrust_unit}}</td>
                <td>{{contract.build_position}}</td>
                <td>{{sheet.total_price}}</td>
                <td>{{sheet.invoice_price}}</td>
                <td>{{sheet.back_price}}</td>
              </tr>
            </table>
          </el-card>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div style="width: 89%;">
              结 算 项 目
            </div>
            <!-- <div @click.stop="print()">
              <el-button type="primary" icon="el-icon-document">
                导出Excel
              </el-button>
            </div> -->
          </template>
          <el-table ref="multipleTable" :data="from.info" tooltip-effect="dark" style="width: 100%" border
            @selection-change="settlement_hook">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="项目名称" width="120">
              <template slot-scope="scope">
                <div>{{scope.row.item_name}}</div>
                <div>{{scope.row.archives_name}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="业务类型" width="120">
              <template slot-scope="scope">{{ scope.row.bus_name}}</template>
            </el-table-column>
            <el-table-column prop="address" label="生产工作量">
              <template slot-scope="scope">{{ scope.row.source_load}}</template>
            </el-table-column>
            <el-table-column prop="address" label="市场工作量">
              <template slot-scope="scope">
                <!-- <el-input-number :precision="2" :step="0.1" v-model="scope.row.load" size="small" :controls="false"
                  :min="scope.row.source_load*1" @blur="edit_price(scope)" :disabled="sheet.is_archives==1">
                </el-input-number> -->
                {{scope.row.load}}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="单位" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.unit}}</template>
            </el-table-column>

            <el-table-column prop="address" label="修改单价">
              <template slot-scope="scope">
                {{scope.row.artificial_price}}
              </template>
            </el-table-column>


            <el-table-column prop="address" label="最终单价" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.price}}</template>
            </el-table-column>

            <!-- <el-table-column prop="address" label="操作" width="220">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
                    <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete"
                      type="danger">
                    </el-button>
                  </el-popconfirm>
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div style="width: 89%;">
              附属结算项目
            </div>
            <!-- <div @click.stop="fushu_print()">
              <el-button type="primary" icon="el-icon-document">
                导出Excel
              </el-button>
            </div> -->
          </template>
          <el-table ref="multipleTable" :data="from.fushu_info" tooltip-effect="dark" style="width: 100%" border
            @selection-change="settlement_fushu">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="项目名称" width="120">
              <template slot-scope="scope">
                <div>{{scope.row.item_name}}</div>
                <div>{{scope.row.archives_name}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="业务类型" width="120">
              <template slot-scope="scope">{{ scope.row.bus_name}}</template>
            </el-table-column>
            <el-table-column prop="address" label="生产工作量">
              <template slot-scope="scope">{{ scope.row.source_load}}</template>
            </el-table-column>
            <el-table-column prop="address" label="市场工作量">
              <template slot-scope="scope">
                {{scope.row.load}}
                <!-- <el-input-number :precision="2" :step="0.1" v-model="scope.row.load" size="small"
                  @blur="edit_price(scope)" :controls="false" :min="scope.row.source_load*1" :disabled="sheet.is_archives==1">
                </el-input-number> -->
              </template>
            </el-table-column>
            <el-table-column prop="address" label="单位" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.unit}}</template>
            </el-table-column>
            <el-table-column prop="address" label="修改单价" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.artificial_price}}
                <!-- <el-input-number :precision="2" :step="0.1" v-model="scope.row.artificial_price" size="small"
                  @blur="edit_price(scope)" :controls="false" :disabled="sheet.is_archives==1 || scope.row.price>0">
                </el-input-number> -->
              </template>
            </el-table-column>
            <el-table-column prop="address" label="最终单价" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.price}}</template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="操作" width="220">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
                    <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete"
                      type="danger">
                    </el-button>
                  </el-popconfirm>
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <div style="width: 89%;">
              发 票 管 理
            </div>
            <!-- <div @click.stop="dayin()">
              <el-button type="primary" icon="el-icon-document" @click="invoice_pop()">
                挂接发票
              </el-button>
            </div> -->
          </template>
          <el-table ref="multipleTable" :data="from.invoice_info" tooltip-effect="dark" style="width: 100%" border
            @selection-change="handleSelectionChange">
            <el-table-column label="发票流水号" width="120">
              <template slot-scope="scope">{{ scope.row.invoice_num}}</template>
            </el-table-column>
            <el-table-column prop="name" label="公司名称" width="120">
              <template slot-scope="scope">{{ scope.row.company_name}}</template>
            </el-table-column>
            <el-table-column prop="address" label="发票类型">
              <template slot-scope="scope">{{ scope.row.invoice_type}}</template>
            </el-table-column>
            <el-table-column prop="address" label="发票金额">
              <template slot-scope="scope">{{ scope.row.price}}</template>
            </el-table-column>
            <el-table-column prop="address" label="开票人">
              <template slot-scope="scope">{{ scope.row.uid_str}}</template>
            </el-table-column>
            <el-table-column prop="address" label="开票时间">
              <template slot-scope="scope">{{ scope.row.invoice_time}}</template>
            </el-table-column>
            <el-table-column prop="address" label="备注">
              <template slot-scope="scope">{{ scope.row.remark}}</template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="操作" width="220">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" content="取消挂接" placement="top">
                  <el-popconfirm title="确定取消挂接吗？" @onConfirm="invoice_del(scope)">
                    <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete"
                      type="danger">
                      取消挂接
                    </el-button>
                  </el-popconfirm>
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template slot="title">
            <div style="width: 89%;">
              回 款 管 理
            </div>
            <!-- <div @click.stop="colle()">
              <el-button type="primary" icon="el-icon-document">
                挂接回款单
              </el-button>
            </div> -->
          </template>
          <el-table ref="multipleTable" :data="from.huikuan_info" tooltip-effect="dark" style="width: 100%" border
            @selection-change="handleSelectionChange">
            <el-table-column prop="name" label="回款单号" width="120">
              <template slot-scope="scope">{{scope.row.backmoney_num}}</template>
            </el-table-column>
            <el-table-column prop="address" label="公司名称">
              <template slot-scope="scope">{{scope.row.company_name}}</template>
            </el-table-column>
            <el-table-column prop="address" label="回款金额">
              <template slot-scope="scope">{{scope.row.price}}</template>
            </el-table-column>
            <el-table-column prop="address" label="录入人员">
              <template slot-scope="scope">{{scope.row.uid_str}}</template>
            </el-table-column>
            <el-table-column prop="address" label="回款时间">
              <template slot-scope="scope">{{scope.row.backmoney_time}}</template>
            </el-table-column>
            <el-table-column prop="address" label="备注" show-overflow-tooltip>
              <template slot-scope="scope">{{scope.row.remark}}</template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="操作" width="220">
              <template scope="scope">
                <el-tooltip class="item" effect="dark" content="取消挂接" placement="top">
                  <el-popconfirm title="确定取消挂接吗？" @onConfirm="huikuan_del(scope)">
                    <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete"
                      type="danger">
                      取消挂接
                    </el-button>
                  </el-popconfirm>
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <div class="mav bottom_two">
        是否添加提醒：
        <el-radio v-model="ruleForm.is_tixing" label="1">提醒</el-radio>
        <el-radio v-model="ruleForm.is_tixing" label="2">不提醒</el-radio>
      </div>
      <div v-if="ruleForm.is_tixing==1" class="bottom_two">
        选择提醒日期：
        <el-date-picker v-model="ruleForm.tixing_date" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>
    </div>
    <!-- <div class="bottom" v-if="sheet.is_archives==0">
      <el-tooltip content="修改价格或工作量后，必须要保存信息，否则无法获取总额" placement="top" style="margin-right: 10px;">
        <el-popconfirm title="确定保存信息吗？" @onConfirm="save_info()">
          <el-button slot="reference" type="primary">保存信息</el-button>
        </el-popconfirm>
      </el-tooltip>
      <el-tooltip content="申请开票" placement="top" style="margin-right: 10px;">
        <el-popconfirm title="确定申请开票吗？" @onConfirm="invoice_pop_tan()">
          <el-button slot="reference" type="primary">申请开票</el-button>
        </el-popconfirm>
      </el-tooltip>

      <el-tooltip v-if="sheet.type==3" content="归档后结算单无法进行任何操作，请谨慎操作" placement="top" style="margin-right: 10px;">
        <el-popconfirm title="确定归档结算单吗？" @onConfirm="file_sheet()">
          <el-button  slot="reference" type="danger">归档结算单</el-button>
        </el-popconfirm>
      </el-tooltip>

      <el-tooltip v-if="sheet.type==1" content="生成最终结算单后，无法再次向此结算单中添加项目" placement="top" style="margin-right: 10px;">
        <el-popconfirm title="确定生成最终结算单吗？" @onConfirm="final_sheet()">
          <el-button slot="reference" type="primary" v-if="sheet.type==1" >生成最终结算单</el-button>
        </el-popconfirm>
      </el-tooltip>

      <el-tooltip content="删除后挂接的合同、项目都会复原到未挂接的状态" placement="top" style="margin-right: 10px;">
        <el-popconfirm title="确定删除结算单吗？" @onConfirm="del_sheet()">
          <el-button slot="reference" type="danger">删除结算单</el-button>
        </el-popconfirm>
      </el-tooltip>
    </div> -->
    <!-- 发票弹框 -->
    <el-dialog title="挂接发票" :visible.sync="pop_invoice_show" width="50%" center>
      <div>
        <el-input v-model="invoice.keyword" @input="invoice_input"></el-input>
        <el-table :data="invoice.list" style="width: 100%;" border @selection-change="changeFun">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" label="id" width="80" prop="id">
          </el-table-column>
          <el-table-column align="center" label="公司名称" width="" prop="company_name">
          </el-table-column>
          <el-table-column align="center" label="发票金额" width="100" prop="price">
          </el-table-column>
          <el-table-column align="center" label="发票编号" width="" prop="invoice_num">
          </el-table-column>
          <el-table-column align="center" label="开票时间" width="140" prop="invoice_time_str">
          </el-table-column>
          <el-table-column align="center" label="备注" width="" prop="remark">
          </el-table-column>
        </el-table>
        <!-- 翻页组件 -->
        <div id="" class="pages">
          <el-pagination @size-change="size_change" background @current-change="current_change"
            :current-page="invoice.page" :page-sizes="[10, 20, 30, 40]" :page-size="invoice.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="invoice.count">
          </el-pagination>
        </div>
        <!-- 翻页组件 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pop_invoice_show = false">取 消</el-button>
        <el-button type="primary" @click="invoice_ok()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 回款弹框 -->
    <el-dialog title="回款管理" :visible.sync="pop_colle_show" width="50%" center>
      <div>
        <el-input v-model="backmoney.keyword" @input="backmoney_input"></el-input>
        <el-table :data="backmoney.list" style="width: 100%;" border @selection-change="backmoney_changeFun">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" label="id" width="80" prop="id">

          </el-table-column>
          <el-table-column align="center" label="公司名称" width="" prop="company_name">
          </el-table-column>
          <el-table-column align="center" label="发票金额" width="100" prop="price">
          </el-table-column>
          <el-table-column align="center" label="回款单号" width="" prop="backmoney_num">
          </el-table-column>
          <el-table-column align="center" label="录入人员" width="140" prop="uid_str">
          </el-table-column>
          <el-table-column align="center" label="回款时间" width="140" prop="back_time_str">
          </el-table-column>
          <el-table-column align="center" label="备注" width="" prop="remark">
          </el-table-column>
        </el-table>
        <!-- 翻页组件 -->
        <div class="pages">
          <el-pagination @size-change="colle_change" background @current-change="current_colle"
            :current-page="backmoney.page" :page-sizes="[10, 20, 30, 40]" :page-size="backmoney.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="backmoney.count">
          </el-pagination>
        </div>
        <!-- 翻页组件 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pop_colle_show = false">取 消</el-button>
        <el-button type="primary" @click="backmoney_ok()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 申请开票 -->
    <el-dialog title="申请开票" :visible.sync="pop_invoice_two_show" width="30%" center>
      <el-form ref="apply_invoice" :model="apply_invoice" :rules="rules" label-width="100px">
        <el-form-item label="开票金额:" prop="price">
          <el-input v-model="apply_invoice.price" placeholder="请输入开票金额" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="apply_invoice.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pop_invoice_two_show = false">取 消</el-button>
        <el-button type="primary" @click="apply_ok()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    statement_cancel_hook_invoiceinvoice_id,
    statement_detail,
    statement_del_item,
    statement_cancel_hook_huikuan,
    invoice_no_hook,
    statement_hook_invoice,
    backmoney_no_hook,
    statement_hook_huikuan,
    statement_archives,
    statement_apply_invoice,
    statement_del,
    statement_edit_bus,
    statement_save,
    statement_create_final
  } from '@/api/jiesuan/jiesuan_list/edit'
  export default {
    name: 'jiesuan_list_detail',
    data() {
      return {
        //附属空数组
        fushu_kong:[],
        //结算空数组
        hook_kong:[],
        //判断是否修改
        edit_show:false,
        loading:false,
        //申请开票
        apply_invoice: {
          item_ids: "",
          price: "",
          remark: ""
        },
        pop_invoice_two_show: false,
        pop_invoice_show: false,
        pop_colle_show: false,
        //合同基本信息
        contract: {},
        sheet: {},
        from: {
          info: [],
          fushu_info: [],
          invoice_info: [],
          huikuan_info: [],
        },
        backmoney: {
          keyword: "",
          page: 1,
          limit: 10,
          count: 0,
          list: [],
          huikuan_id: "",
        },
        invoice: {
          keyword: "",
          page: 1,
          limit: 10,
          count: 0,
          list: [],
          invoice_ids: ""
        },
        //折叠面板开启
        activeNames: ['0', '1', '2', '3', '4', ],

        tableData: [
          ['1', "", '2'],
          ['3', '4'],
        ],
        person_whole: [],
        list_elections: [],
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false,
          is_tixing:"1",
          tixing_date: ""
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      console.log(this.$route.query.statement_id)
      this.getList()
      //回款弹框默认数据
      this.collelist()
    },
    mounted() {

    },
    methods: {
      //生成最终结算单
      final_sheet(){
        statement_create_final(this.$route.query.statement_id).then(res=>{
          console.log(res)
          if(res.code==200){
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
        })
      },
      //保存信息
      save_info(){
        console.log(this.ruleForm.is_tixing)
        if(this.ruleForm.is_tixing=="2"){
          this.ruleForm.tixing_date=""
        }
        statement_save(this.$route.query.statement_id,this.ruleForm.is_tixing,this.ruleForm.tixing_date).then(res=>{
          console.log(res)
          if(res.code==200){
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
        })
      },
      edit_price(val) {
        console.log(val.row)
        statement_edit_bus(this.$route.query.statement_id, val.row.market_item_id, val.row.id, val.row.load, val.row
          .artificial_price).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
        })
      },
      del_sheet() {
        statement_del(this.$route.query.statement_id).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
        })
      },
      //申请发票ok
      apply_ok() {
        this.$refs.apply_invoice.validate((valid) => {
          if (valid) {
            statement_apply_invoice(this.$route.query.statement_id, this.apply_invoice).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.pop_invoice_two_show = false
              }
            })
          }
        })
      },
      //申请开票弹框
      invoice_pop_tan() {
        if (this.apply_invoice.item_ids != "") {
          this.pop_invoice_two_show = true
        } else {
          this.$message({
            message: "请勾选结算项目",
            type: "warning",
          });
        }
      },
      //归档结算单
      file_sheet() {
        statement_archives(this.$route.query.statement_id).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
        })
      },
      handleSelectionChange() {

      },
      //附属打钩
      settlement_fushu(val){
        this.fushu_kong=val
      },
      //结算项目打钩
      settlement_hook(val) {
        this.hook_kong=val
        this.apply_invoice.item_ids = val
          .map((item) => {
            return item.id;
          })
          .join(",");
      },
      print() {
        console.log(this.hook_kong)
        let kong=[]
        for (let a = 0; a < this.hook_kong.length; a++) {
                  let tmp =[
                    this.hook_kong[a].archives_name,
                    this.hook_kong[a].bus_name,
                    this.hook_kong[a].source_load,
                    this.hook_kong[a].load,
                    this.hook_kong[a].unit,
                    this.hook_kong[a].artificial_price,
                    this.hook_kong[a].price,
                  ]
                  kong.push(tmp)
        }
        console.log(kong)

        if (this.apply_invoice.item_ids != "") {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['项目名称', '业务类型', '生产工作量', '市场工作量', '单位',"修改单价","最终单价"]
            const data = kong
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '结算项目',
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
        } else {
          this.$message({
            message: "请勾选结算项目",
            type: "warning",
          });
        }
      },
      fushu_print() {
        console.log(this.fushu_kong)
        let kong=[]
        for (let a = 0; a < this.fushu_kong.length; a++) {
                  let tmp =[
                    this.fushu_kong[a].archives_name,
                    this.fushu_kong[a].bus_name,
                    this.fushu_kong[a].source_load,
                    this.fushu_kong[a].load,
                    this.fushu_kong[a].unit,
                    this.fushu_kong[a].artificial_price,
                    this.fushu_kong[a].price,
                  ]
                  kong.push(tmp)
        }
        console.log(kong)

        if (this.kong!= "") {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['项目名称', '业务类型', '生产工作量', '市场工作量', '单位',"修改单价","最终单价"]
            const data = kong
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '附属结算项目',
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
        } else {
          this.$message({
            message: "请勾选附属结算项目",
            type: "warning",
          });
        }
      },
      //发票搜索
      invoice_input() {
        invoice_no_hook(this.invoice).then(res => {
          if (res.code == 200) {
            this.invoice.list = res.data
            this.invoice.count = res.count
          }
        })
      },
      //回款搜索
      backmoney_input() {
        this.collelist()
      },
      //默认回款列表
      collelist() {
        backmoney_no_hook(this.$route.query.statement_id,this.backmoney).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.backmoney.list = res.data
            this.backmoney.count = res.count
          }
        })
      },
      //回款弹框
      colle() {
        if(this.sheet.is_archives==1){
            this.$message({
              message: "已归档无法修改",
              type: "warning",
            });
        }else{
        this.pop_colle_show = true
        }
      },
      //回款ok
      backmoney_ok() {
        if (this.backmoney.huikuan_id != "") {
          statement_hook_huikuan(this.$route.query.statement_id, this.backmoney.huikuan_id).then(res => {
            console.log(res)
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.pop_colle_show = false
              this.collelist()
              this.getList()
            }
          })
        }
      },
      //发票ok
      invoice_ok() {
        if (this.invoice.invoice_ids != "") {
          statement_hook_invoice(this.$route.query.statement_id, this.invoice.invoice_ids).then(res => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.pop_invoice_show = false
              this.invoice_pop()
              this.getList()
            }
          })
        }
      },
      //发票多选框
      changeFun(val) {
        this.invoice.invoice_ids = val
          .map((item) => {
            return item.id;
          })
          .join(",");
        console.log(this.invoice.invoice_ids)
      },
      //回显多选框
      backmoney_changeFun(val) {
        this.backmoney.huikuan_id = val
          .map((item) => {
            return item.id;
          })
          .join(",");
        console.log(this.backmoney.huikuan_id)
      },

      // 翻页
      current_change(e) {
        this.invoice.page = e;
        invoice_no_hook(this.invoice).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.invoice.list = res.data
            this.invoice.count = res.count
          }
        })
      },
      //回款翻页
      current_colle(e) {
        this.backmoney.page = e;
        this.collelist()
      },
      //回款一页显示多少条变化
      colle_change(e) {
        console.log(e)
        this.backmoney.limit = e;
        this.collelist()
      },
      // 一页显示多少条变化
      size_change(e) {
        console.log(e)
        this.invoice.limit = e;
        invoice_no_hook(this.invoice).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.invoice.list = res.data
            this.invoice.count = res.count
          }
        })
      },
      invoice_pop() {
        if(this.sheet.is_archives==1){
            this.$message({
              message: "已归档无法修改",
              type: "warning",
            });
        }else{
          this.pop_invoice_show = true
          invoice_no_hook(this.invoice).then(res => {
            console.log(res)
            if (res.code == 200) {
              this.invoice.list = res.data
              this.invoice.count = res.count
            }
          })
        }
      },
      dayin() {
        console.log("吾问无为谓")
      },
      list_del(val) {
        if(this.sheet.is_archives==1){
            this.$message({
              message: "已归档无法修改",
              type: "warning",
            });
        }else{
          statement_del_item(this.$route.query.statement_id, val.row.market_item_id).then(res => {
            console.log(res)
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getList()
            }
          })
        }
      },
      //发票删除
      invoice_del(val) {
        if(this.sheet.is_archives==1){
            this.$message({
              message: "已归档无法修改",
              type: "warning",
            });
        }else{
          statement_cancel_hook_invoiceinvoice_id(this.$route.query.statement_id, val.row.id).then(res => {
            console.log(res)
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getList()
            }
          })
        }
      },
      huikuan_del(val) {
        if(this.sheet.is_archives==1){
            this.$message({
              message: "已归档无法修改",
              type: "warning",
            });
        }else{
            statement_cancel_hook_huikuan(this.$route.query.statement_id, val.row.id).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.getList()
              }
            })
        }
      },
      // 获取列表数据
      getList() {
        this.listLoading = true
        statement_detail(this.$route.query.statement_id).then(res => {
          console.log(res, "公告")
          this.contract = res.data.contract_info
          this.sheet = res.data.statement_info

          this.from.info = res.data.item_info.list

          this.from.fushu_info = res.data.item_fushu_info.list
          this.from.invoice_info = res.data.invoice_info.list
          this.from.huikuan_info = res.data.huikuan_info.list
          this.listLoading = false
        })
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  .bottom_two {
    margin-bottom: 40px;
  }

  .bottom {
    text-align: center;
    position: fixed;
    bottom: 0;
    /* left: 50%; */
    background-color: #fff;
    width: 100%;
    height: 50px;
    line-height: 50px;
    z-index: 199;
  }

  .mav {
    margin-top: 25px;
  }

  .button_wight {
    width: 60%;
    height: 60px;
  }

  .button {
    text-align: center;
  }

  .desc {
    display: flex;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .main {
    padding: 20px;
  }

  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 230px !important;
    padding: 3px 3px !important;
  }
</style>
<style type="text/css">
  .el-collapse-item__content {
    padding: 0px;
  }

  .el-collapse-item__header {
    /* font-size: 18px; */
    /* text-indent: 20px; */
    line-height: 0px;
    background-color: #F6F6F6;
    height: 50px;
    padding-left: 20px;
  }

  .el-input-number--small {
    width: 100%;
  }
</style>
